css 【实用】

实用样式

以下内容： 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背 要背

慎用宽高 尽量不要加 容易出现 bug 及兼容问题

清除浮动 在浮动的父级加

/* css */

.className::after{
    content:'';
    display: block;
    clear:both;
}

rem算法

/* css */

html { font-size: 62.5%; } /* IE9以下兼容 */
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

单行溢出变点点：

/* css */

.className{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

多行溢出变点点：

/* css */

.className{
    overflow: hidden;    
    display: -webkit-box;               // 将对象作为弹性伸缩盒子模型显示 。
    text-overflow: ellipsis;        // 可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。
    -webkit-box-orient: vertical;       // 设置或检索伸缩盒对象的子元素的排列方式 。
    -webkit-line-clamp: 2;              // 限制在一个块元素显示的文本的行数。

}

文字两端对齐：

css 

/* 中文文字两端对齐 */

.className1{ 
    text-align:justify;
    text-justify:inter-ideograph
}

// 没用用下面的方法：
.className1{ 
    text-align: justify;
    text-align-last: justify;
    /*兼容ie*/
    text-justify: distribute-all-lines;
}

/* 英文文字两端对齐 */
.className1{ 
    text-align:justify;
    text-justify:newspaper
}

css中如何让第一个和最后一个不被选中?

tr:not(:first-child):hover {
        background: #ffffdd;
    }
/* 如果上面的代码出现问题，使用下面的会更安全 或者 :not(class) */
.b:not(.b-n):hover {
    background: #ffffdd;
}

图片变灰 与 原色

/* css */

.gray {  //灰色
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    
    filter: grayscale(100%);
    
    filter: gray;
}

.init {  //原色
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    
    filter: grayscale(0%);
    
    filter: ;
}

清除a的默认样式

/* css */

.className1{ 
    text-decoration:none;
    out-line:none;
}

点击跳转页面

/* html */
<div onclick="window.open('http://www.baidu.com')">在新窗口跳转至百度</div>
<div onclick="window.open('http://www.baidu.com','_self')">在当前窗口跳转至百度</div>

清除某个制定div下的:hover

/* css */
li:not(.uesr-choose):hover div{height:50px};
/* :not(.uesr-choose) 写上要清除的class后 再写hover即可 */

input 和 textarea 文字不统一

/* css */
input::-webkit-input-placeholder{
    color: #999999;
    font-size: 14px;
    font-family:"微软雅黑";
}

textarea::-webkit-input-placeholder{
    color: #999999;
    font-size: 14px;
    font-family:"微软雅黑";
}

input选中样式

input:focus{
  outline-color:#fa9c08;
}

修改浏览器滚动条样式

.xxx::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
.xxx::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.xxx::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

textarea 修改样式

textarea{
    resize: none; // 禁止缩放
  }

textarea:focus { // 设置点击选中边框
    outline: none; 
    border: 1px solid #f60;
  }

select,option 修改样式

select,option{
    /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
    border: none;
    outline: none;
    /*很关键：将默认的select选择框样式清除*/
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    /*将背景改为红色*/
    background:#fff;
    /*加padding防止文字覆盖*/
    padding-right: .14rem;
}
/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {display: none;}

filter 滤镜

-webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
filter:hue-rotate(90deg);

滤镜	html 写法
色相旋转Hue-rotate	filter: hue-rotate(90deg);
亮度 Brightness	filter: brightness(300%);
对比度 Contrast	filter: contrast(0%);
灰度 Grayscale	filter: grayscale(0%);
饱和度 Saturate	filter: saturate(0%);
褐色Sepia	filter: sepia(100%);
反色Invert	filter: invert(100%);
模糊Blur	filter: blur(1px);
透明度Opacity	filter: opacity(75%);
阴影Drop Shadow	filter: drop-shadow(5px 5px 10px #666);
Url() 【html写法在下面】	filter: url(‘#greenish’);

/* HTML (url写法) */
<svg xmlns="http://www.w3.org/2000/svg">  
    <filter id="greenish">  
        <feComponentTransfer>  
        <feFuncR type="linear" slope="2" intercept="-0.5"/>  
        <feFuncG type="linear" slope="2" intercept="-0.1"/>  
        <feFuncB type="linear" slope="2" intercept="-0.25"/>  
        </feComponentTransfer>  
        </filter>  
        <filter id="bluish">  
        <feComponentTransfer>  
        <feFuncR type="linear" slope="2" intercept="-0.5"/>  
        <feFuncG type="linear" slope="2" intercept="-0.1"/>  
        <feFuncB type="linear" slope="2" intercept="0"/>  
        </feComponentTransfer>  
    </filter>  
</svg>

img 模糊

/* img 不模糊 */
img{
    image-rendering: -moz-crisp-edges; /* Firefox */
    image-rendering: -o-crisp-edges; /* Opera */
    image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */ image-rendering: crisp-edges;
     -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

/* input 清除默认样式 */
input{
    border:none;
    -webkit-appearance:none;/*去除阴影边框*/
    outline: none;
    -webkit-tap-highlight-color:rgba(0,0,0,0);/*点击高亮的颜色*/
}